A Bar chart with post processing

This Bar chart uses the custom RGraph ondraw event to add highlight to each bar.
There's an SVG version of this chart here.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var bar7 = new RGraph.Bar({
            id: 'cvs',
            data: [[47,75],[32,74],[71,85],[25,19],[23,71],[81,59],[43,130],[23,20]],
            options: {                    textSize: 14,
                gutterLeft: 45,
                colors: ['#494949','#35A0DA'],
                labels: ['Alf','Bert','Craig','Dan','Edgar','Fred','Gary','Harry'],
                ylabelsCount: 3,
                numyticks: 6,
                backgroundGridAutofitNumhlines: 3,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                hmargin: 5,
                strokestyle: 'rgba(0,0,0,0)',
                textAccessible: true,
                shadow: true
            }
        }).on('draw', function (obj)
        {
            var len = obj.coords.length;

            for (var i=0; i<len; ++i) {

                var x = obj.coords[i][0];
                var y = obj.coords[i][1];
                var w = obj.coords[i][2] / 2;
                var h = obj.coords[i][3];

                obj.context.fillStyle = RGraph.LinearGradient(
                    obj,
                    0,0,0,250,
                    'rgba(255,255,255,.75)',
                    'rgba(255,255,255,0)'
                );
                obj.context.fillRect(x,y,w,h)
            }
        }).draw();
    };
</script>